<template>
	 <page-meta :root-font-size="`${fontSize}px`"></page-meta>
	<view class="record-container">
		<tab-nav :tabCurrentIndex="tabCurrentIndex" :navList="navList" @change="setTabIndex" style=""></tab-nav>
		<view class="search">
			<view class="search-box">
				<view class="icon">
					<image src="../../static/icon/search.png"></image>
				</view>
				<input @confirm="handleSearch" v-model="searchText" type="text" class="search-input" confirm-type="search"
				 placeholder="请输入搜索条件">
				<dean-popover @select="selectChange" class="pop" :btnList="btnList"></dean-popover>
			</view>
		</view>
		<!-- 全部 -->
		<view class="record-content" v-if="tabCurrentIndex === 0">
			<ticket-list v-if="ticketList.length" @refresh="getTicketList" :ticket-list="ticketList"></ticket-list>
			<view v-else>
				<van-empty description="暂无记录" />
			</view>
		</view>
		<!-- 待完成 -->
		<view class="record-content" v-if="tabCurrentIndex === 1">
			<ticket-list v-if="IncompleteList.length" @refresh="getTicketList" :ticket-list="IncompleteList"></ticket-list>
			<view v-else>
				<van-empty description="暂无记录" />
			</view>
		</view>
		<!-- 已完成 -->
		<view class="record-content" v-if="tabCurrentIndex === 2">
			<ticket-list v-if="completeList.length" :ticket-list="completeList"></ticket-list>
			<view v-else>
				<van-empty description="暂无记录" />
			</view>
		</view>
	</view>
</template>

<script>
	import DeanPopover from '@/components/dean-popover/dean-popover.vue'
	import TabNav from '@/components/tab-nav/tab-nav.vue'
	import dayjs from 'dayjs'
	import TicketList from './components/ticket-list.vue'
	import { mapState } from 'vuex'
	export default {
		computed: {
			...mapState(['fontSize'])
		},
		data() {
			return {
				searchText: '',
				ticketTypes: this.$types.ticketType,
				params: {
					报事人id: null,
					报事人类型: 1,
					pagination: {
						current: 1,
						pageSize: 10000
					},
					sorter: {
						field: "id",
						order: 0
					}
				},
				params1: {
					id: null,
					操作类型: 'abandon'
				},
				tabCurrentIndex: 0,
				navList: [{
						text: '全部'
					},
					{
						text: '待完成'
					},
					{
						text: '已完成'
					}
				],
				ticketList: [],
				IncompleteList: [],
				completeList: [],
				btnList: ['全部','装修申请','装修验收','故障报修','上门回收','消防安全','保洁清理','设备安装','绿化养护','意见投诉'],
				ticketTypeList: ['','G','H','A','B','C','D','E','F','I']
			}
		},
		onLoad() {
			this.getTicketList()
		},
		methods: {
			// 获取全部工单列表
			getTicketList() {
				uni.showLoading({
					mask: true
				})
				this.params.报事人id = uni.getStorageSync('userInfo').id
				this.params.所属项目 = uni.getStorageSync('projId')
				
				this.$http2.post('ticketSystem/ticket/list', this.params).then(res => {
					console.log(res)
					if (res.code === 10000) {
						if(res.data.list) {
							res.data.list.forEach(item => {
								item.创建时间 = dayjs(item.创建时间).format('YYYY-MM-DD HH:mm:ss')
							})
							this.ticketList = res.data.list.filter(item => item['工单状态'] !== 'abandoned')
							this.IncompleteList = res.data.list.filter(item => {
								return item.工单状态.indexOf('completed')==-1 && item.工单状态 !== 'abandoned'
							})
							this.completeList = res.data.list.filter(item => item.工单状态.indexOf('completed')>-1)
						}else {
							this.ticketList = []
							this.IncompleteList = []
							this.completeList = []
						}
					}
				})
			},
			// 上拉加载更多
			getMoreTicketList() {

			},
			handleSearch(e) {
				this.params.报事描述 = this.searchText
				this.getTicketList()
			},
			selectChange(val) {
				this.params.工单类型 = this.ticketTypeList[val]
				this.getTicketList()
			},
			goTicketDetail(id) {
				uni.navigateTo({
					url: '../ticketDetail/ticketDetail?id=' + id
				})
			},
			handleCancel() {
				console.log('阻止冒泡')
			},
			setTabIndex(val) {
				this.tabCurrentIndex = val
			},
			cancel(id) {
				uni.showModal({
					title: '提示',
					content: '确认取消报事吗？',
					success: (res) => {
						if (res.confirm) {
							this.cancelTicket(id)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			cancelTicket(id) {
				this.params1.id = id
				this.$http2.post('ticketSystem/ticket/changeStatus', this.params1).then(res => {
					console.log(res)
					if (res.code === 10000) {
						this.getTicketList()
						uni.showToast({
							title: '取消成功'
						})
					}
				})
			}
		},
		watch: {
			searchText() {
				if (this.searchText == '') {
					this.params.报事描述 = this.searchText
					this.getTicketList()
				}
			}
		},
		components: {
			DeanPopover,
			TabNav,
			TicketList
		}
	}
</script>

<style lang="scss">
	.van-empty {
		background-color: #fff;
	}
	.record-container {
		padding-top: 68rpx;
		background-color: #f5f5f5;
		// padding-bottom: 20rpx;

		.record-content {
			.record-item {
				.done {
					display: flex;
					justify-content: space-between;
					padding-right: 10rpx;
				}

				width: 680rpx;
				height: 282rpx;
				background-color: #fff;
				box-shadow: 0px 1rpx 11rpx 1rpx #EEEEEE;
				border-radius: 8rpx;
				margin: 20rpx 0;
				// margin-top: 20rpx;
				margin-left: 30rpx;
				&:last-child {
					margin-bottom: 20rpx;
				}
				.item-title {
					width: 100%;
					height: 71rpx;
					display: flex;
					justify-content: space-between;
					padding-right: 30rpx;
					align-items: center;
					border-bottom: 2rpx solid #eee;
					position: relative;

					// padding-top: 10rpx;
					.left-border {
						width: 6rpx;
						height: 30rpx;
						background-color: #1064E9;
						position: absolute;
						left: 0;
						top: 20rpx;
					}

					.left {
						padding-left: 30rpx;
						color: #333;
						font-weight: bold;
						width: 308rpx;
						// margin-right: 112rpx;
					}

					.center {
						display: flex;
						color: #FD9938;
						margin-right: 96rpx;
						margin-left: -80rpx;

						.center-img {
							width: 29rpx;
							height: 32rpx;
							margin-right: 6rpx;
							margin-top: 6rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}

					.right {
						color: #FF8686;
						width: 82rpx;
						height: 36rpx;
						font-size: 22rpx;
						border: 2rpx solid #FF8686;
						text-align: center;
					}

					.handle {
						color: $theme-color;
						width: 82rpx;
						height: 36rpx;
						font-size: 22rpx;
						border: 2rpx solid $theme-color;
						text-align: center;
					}

					.complete {
						color: #83D065;
						width: 82rpx;
						height: 36rpx;
						font-size: 22rpx;
						border: 2rpx solid #83D065;
						text-align: center;
					}
				}

				.item-content {
					color: #666;
					padding: 30rpx;
					font-size: 28rpx;

					.un-evaluate {
						display: flex;

						.evaluate-icon {
							margin-left: 62rpx;
							width: 96rpx;
							height: 48rpx;
							background-color: #FFA85B;
							font-size: 26rpx;
							color: #fff;
							text-align: center;
							line-height: 48rpx;
						}

						.have-evaluate {
							width: 96rpx;
							height: 48rpx;
							line-height: 48rpx;
							text-align: center;
							align-items: center;
							background-color: $theme-color;
							color: #fff;
							font-size: 26rpx;
							margin-left: 62rpx;
							// border: 2rpx solid #BFBFBF;
							border-radius: 2rpx;
						}
					}

					.content-top {
						margin-bottom: 16rpx;
						display: flex;
						justify-content: space-between;
						line-height: 43rpx;
					}

					.content-center {
						margin-bottom: 16rpx;
						line-height: 43rpx;
					}

					.content-bottom {
						line-height: 43rpx;
						overflow: hidden; //超出的隐藏
						text-overflow: ellipsis; //省略号
						white-space: nowrap; //强制一行显示
					}
				}
			}
		}

		.search {
			font-size: 32rpx;
			// margin-left: 100rpx;
			width: 750rpx;
			height: 96rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			padding-left: 50rpx;

			.search-box {
				width: 564rpx;
				height: 56rpx;
				padding-left: 17rpx;
				padding-right: 20rpx;
				// background-color: pink;
				border: 2rpx solid #595959;
				border-radius: 28rpx;
				display: flex;

				.icon {
					width: 50rpx;
					height: 46rpx;
					margin-top: 3rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.search-input {
					flex: 1;
					height: 100%;
					color: #999;
				}

				.pop {
					position: absolute;
					right: 60rpx;
				}
			}
		}
	}
</style>
